/* 
    Document   : estilos
    Created on : 16-feb-2011, 18:29:09
    Author     : ZiToU
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}
body{
    margin: auto;
    font-family: Verdana, sans-serif;
    font-size: 15px;
    color: #615a5a;
    text-align: left;
    height: 100%;
}
body a{

    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #615a5a;
}
body p{

    font-family: Verdana, sans-serif;
    font-size: 17px;
    color: #615a5a;
}
/**********Cabecera*/
#cabeceraExterna{
    position: relative;
    float: left;
    width: 98.5%;
    height: 140px;
    background: url(../images/header-2.jpg) no-repeat;
}
#cabecera{
    position: relative;
    float: left;
    width: 100%;
    height: 140px;
    background: url(../images/header-2.jpg) no-repeat;
}
.titulo{
    padding-left: 10px;
    padding-top: 10px;
}
/**********Botones Perfil***************/
.confirmarAmistad{
    background: url(../images/botones/confirmarAmigo.png) no-repeat;
    width: 42px;
    height: 42px;
}
.confirmarAmistad:hover{
    background: url(../images/botones/confirmarAmigoHover.png);
    width: 52px;
    height: 52px;
}
.ignorarAmistad{
    background: url(../images/botones/ignorarAmistad.png) no-repeat;
    width: 42px;
    height: 42px;
}
.ignorarAmistad:hover{
    background: url(../images/botones/ignorarAmistadHover.png);
    width: 52px;
    height: 52px;
}
.solicitarAmistad{
    background: url(../images/botones/agregarAmigo.png) no-repeat;
    width: 42px;
    height: 42px;
}
.solicitarAmistad:hover{
    background: url(../images/botones/agregarAmigoHover.png);
    width: 52px;
    height: 52px;
}
.borrarAmigo{
    background: url(../images/botones/borrarAmigo.png) no-repeat;
    width: 42px;
    height: 42px;
}
.borrarAmigo:hover{
    background: url(../images/botones/borrarAmigoHover.png);
    width: 52px;
    height: 52px;
}
.miPerfil
{
    padding-left: 400px;
    padding-top:0px;
}
.botonPrincipal:hover{
    background: url(../images/botones/botonPrincipalMouseOver.png)
}
.botonPrincipal{
    background: url(../images/botones/botonPrincipal.png) no-repeat;
    width: 146px;
    height: 58px;
}
.botonMiPerfil:hover{
    background: url(../images/botones/botonPerfilMouseOver.png)
}
.botonMiPerfil{
    background: url(../images/botones/botonPerfil.png) no-repeat;
    width: 139px;
    height: 57px;
}

.botonMultimedia:hover{
    background: url(../images/botones/botonPerfilMouseOver.png)
}
.botonMultimedia{
    background: url(../images/botones/botonPerfil.png) no-repeat;
    width: 139px;
    height: 57px;
}

.botonInformacion:hover{
    background: url(../images/botones/botonInformacionMouseOver.png)
}
.botonInformacion{
    background: url(../images/botones/botonInformacion.png) no-repeat;
    width: 152px;
    height: 58px;
}
/**********BOTONES DE LA CABECERA*******/
.botones
{
    float:left;
}
.botonSalir{
    background: url(../images/botones/salir1.png) no-repeat;
    width: 45px;
    height: 45px;
}
.botonDesactivar{
    background: url(../images/botones/borrar1.png) no-repeat;
    width: 45px;
    height: 45px;
}
.botonBaja{
    background: url(../images/botones/desactiva1.png) no-repeat;
    width: 45px;
    height: 45px;
}
.botonSalir:hover{
    background: url(../images/botones/salir1Hover.png) no-repeat;
    width: 60px;
    height: 60px;
}
.botonDesactivar:hover{
    background: url(../images/botones/borrar1Hover.png) no-repeat;
    width: 60px;
    height: 60px;
}
.botonBaja:hover{
    background: url(../images/botones/desactiva1Hover.png) no-repeat;
    width: 60px;
    height: 60px;
}
.botonNext{
    background: url(../images/botones/flechaN.png) no-repeat;
    width: 30px;
    height: 30px;
    border: 0;
}
.botonPrev{
    background: url(../images/botones/flechaP.png) no-repeat;
    width: 30px;
    height: 30px;
    border: 0;
}
.botonUpload{
    background: url(../images/botones/subir.png) no-repeat;
    width: 60px;
    height: 60px;
    border: 0;
}
.botonComentar{
    background: url(../images/botones/ok.png) no-repeat;
    width: 30px;
    height: 30px;
    border: 0;
}
.botonGuardar{
    background: url(../images/guardar.jpg) no-repeat;
    width: 60px;
    height: 60px;
    border: 0;
}
/*************************************/
/************Tablas de lista de amigos*/
.amigos th{
    font-family: Verdana, sans-serif;
    font-size: 15px;
    color: #615a5a;
    text-align: left;
}
.amigos tr td{
    padding-left: 5px;
    border-style: groove;
    border-color: #cccccc;
    border-spacing: 1px;
    height: 60px;
    width: 300px;
}

.amigos tr td a{
    font-family: Verdana, sans-serif;
    font-size: 15px;
    color: #615a5a;
    text-align: left;
}
/************************************/
/******************Lista de Amigos***/
.buscarAmigosLista p{
    font-family: Verdana, sans-serif;
    font-size: 15px;
    color: #615a5a;
    text-align: left;

}
.buscarAmigosLista{
    padding-left: 60px;
}
.quitarAmigoLista{
    background: url(../images/botones/contact_grey_remove.png) no-repeat;
    width: 20px;
    height: 20px;
}
.quitarAmigoLista:hover{
    background: url(../images/botones/contact_grey.png) no-repeat;
    width: 20px;
    height: 20px;
}
.agregarAmigo{
    background: url(../images/botones/contact_blue_add.png) no-repeat;
    width: 20px;
    height: 20px;
}
.agregarAmigo:hover{
    background: url(../images/botones/contact_blue.png) no-repeat;
    width: 20px;
    height: 20px;
}
.linkCrearLista{
    text-decoration: none;
    font-size: 12px;
}
.crearLista{
    background: url(../images/botones/add.png) no-repeat;
    width: 20px;
    height: 20px;
}
.crearLista:hover{
    background: url(../images/botones/add_outline.png) no-repeat;
    width: 20px;
    height: 20px;
}
#mensajeLista{

}
/***********************************/
/**********Mensajes****************/
.botonEnviarMensaje{
    background: url(../images/botones/enviarMensaje.png) no-repeat;
    width: 60px;
    height: 60px;
    float: right;
    margin-right: 150px;
}
.botonEnviarMensaje:hover{
    background: url(../images/botones/enviarMensajeHover.png) no-repeat;
    width: 65px;
    height:65px;
    float: right;
    margin-right:  150px;
}
.pg-normal {
    color: black;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
}
.pg-selected {
    color: black;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
#results th{
    font-family: Verdana, sans-serif;
    font-size: 15px;
    color: #615a5a;
    text-align: center;
}
#results tr td{
    padding-left: 5px;
    border-style: groove;
    border-color: #cccccc;
    border-spacing: 1px;
    height: 40px;
    width: 300px;
    color: #212121;
}
#nuevoMensaje{
    padding-left: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}
/*********************************/
#contenido{
    position: relative;
    float: left;
    width: 1100px;
    height: 100%;
    z-index: 4;
    padding-left: 90px;
}


#columnaCentral{
    position: relative;
    width: 68%;
    float: left;
    padding-left: 4px;
    padding-top: 5px;
    background: url(../images/fondoCentro.PNG) repeat-y;
}
#contenedorCentral{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}
#centro{
    padding-left: 10px;
    padding-top: 20px;
    width:94%;
    position: relative;
    float: left;
    background: url(../images/fondoTransparentepng.png) no-repeat center;
    min-height:650px;
}
/**********Derecha************/
#cumpleanios{
    position: relative;
    width: 100%;
    float: left;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px groove #363636;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
#cumpleanios img{
    width: 40px;

}
#cumpleanios a label{
    width: 40px;
    cursor: pointer;
}
.buscarUsuarios{
    background: url(../images/botones/Search.png) no-repeat;
    width: 24px;
    height: 24px;
    margin-top: 25px;
}
#resultadoBusqueda{
    width: 90%;
}
.suggestionsBox {
    position: relative;
    margin: 0px 0px 0px 0px;
    width: 200px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px groove #000;
    color: #363636;
}
.suggestionList li {
    cursor: pointer;
    list-style: none;
    background: url(../images/rosa02.jpg) repeat;
}
.suggestionList li:hover {
    font-size: larger;
    font-weight: bolder;
}
#columnaDerecha{
    position: relative;
    width: 18%;
    float: right;
}
.botonInvitar{
    background: url(../images/botones/botonInvitar.png) no-repeat;
    width: 26px;
    height: 25px;
}
.botonInvitar:hover{
    background: url(../images/botones/botonInvitarhover.png) no-repeat;
    width: 27px;
    height: 27px;
}
/******************************/
/*************Izquierda*******/
.oculta{
    display: none;
}
#notificaciones{
    position: relative;
    width: 96%;
    float: left;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px groove #363636;
    padding-bottom: 5px;
    margin-bottom: 5px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 12px;
}
#notificaciones ul{
    padding-left: 0px;
}
#notificaciones ul li{
    list-style: none;
}
#notificaciones p{
    text-decoration: none;
    color: black;
    font-size: 12px;
}
.peticion{
    text-decoration: blink underline;
    color: crimson;
    cursor: pointer;
}
#peticionesAmistad{
    padding-left: 5px;
}
#columnaIzquierda{
    position: relative;
    width: 13%;
    height: 100%;
    float: left;
}
.eliminarLista{
    background: url(../images/botones/remove.png) no-repeat;
    width: 20px;
    height: 20px;
}
.eliminarLista:hover{
    background: url(../images/botones/remove_outline.png) no-repeat;
    width: 20px;
    height: 20px;
}
.menuDiv{
    width: 95%;
}
.menu{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -border-radius:5px;
    -webkit-box-shadow:1px 1px 3px #888;
    -moz-box-shadow:1px 1px 3px #888;

}
.menu li{border-bottom:1px solid #FFF;}
.menu ul li, #menu li:last-child{border:none; width: 100%;}
.menu a{
    display:block;
    color:#222222;
    text-decoration:none;
    font-family:Verdana, Arial, sans-serif;
    font-size:15px;
    font-weight: bold;
    padding:3px 5px;
    text-shadow:2px 2px 2px #325179;
}
.menu a:hover{
    color:#000;
    font-size: larger;
    font-weight: bolder;
    -webkit-transition: color 0.2s linear;
}
.menu ul li{background:url(../images/rosa02.jpg) repeat}
.menu ul li:hover{
    background-color:#FFF;
    color:gainsboro;
    text-shadow:none;
    -webkit-transition: color, background-color 0.2s linear;
}
.menu, .menu ul{
    display:block;
    background:url(../images/gris.JPG) repeat;
    margin:0;
    padding:0;
    width:100%;
    list-style:none;
    color: thistle;
}
.menu li ul {display:none;}
#mensaje{
    padding-left: 224px;
    padding-top: 45px;
    padding-right: 4px;
}
#linkLista{
    background:url(../images/gris.JPG) repeat;
    margin:0;
    padding:0;
    width:100%;
    color: #222222;
    text-decoration:none;
    font-family:Verdana, Arial, sans-serif;
    font-size:15px;
    font-weight: bold;
    padding:3px 5px;
    text-shadow:2px 2px 2px #325179;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}
#linkLista:hover{
    color:#000;
    font-size: larger;
    font-weight: bolder;
    -webkit-transition: color 0.2s linear;
}
/***************************************/

#pie p{
    background: url('../images/gris.JPG') repeat-x;
    text-align: center;
    font-size: 12px;
}
#pie{
    position: fixed;
    width: 100%;
    height: 25px;
    background: url('../images/gris.JPG') repeat-x;
    z-index: 5;
    bottom: 0;
}
/**********LOGIN*******************/
.cancelar{
    background: url(../images/botones/cancelar.png) no-repeat;
    width: 30px;
    height: 30px;
}
.cancelar:Hover{
    background: url(../images/botones/cancelarHover.png) no-repeat;
    width: 35px;
    height: 35px;
}
.idLogin{
    background: url(../images/botones/entrar.png) no-repeat;
    width: 50px;
    height: 50px;
}
.idLogin:hover{
    background: url(../images/botones/entrarHover.png) no-repeat;
    width: 60px;
    height: 60px;
}
.botonEnviar{
    background: url(../images/botones/ok.png) no-repeat;
    width: 30px;
    height: 30px;
}
.botonEnviar:hover{
    background: url(../images/botones/okHover.png) no-repeat;
    width: 35px;
    height: 35px;
}
#formLogin{
    position: relative;
    width: 90%;
    top: 10px;
    text-align: right;
}
#login{
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
}
/********Registro********/
#ui-datepicker-div{
    z-index: 4;
}
#registro{
    position: relative;
    float: right;
    width: 50%;
    height: 100%;
    background: url(../images/fondoGuay1.PNG) no-repeat;
}
#formularioRegistro{
    padding-left: 100px;
    text-align: right;
    font-size: 15px;
    font-weight: bold;
}
#formularioRegistro tr td{
    height: 30px;
}
#tituloRegistro{
    text-align: center;
    text-decoration: blink;
}
/*************Recordar y reactivar**/
#recordar{
    padding-left: 224px;
    font-size: 12px;
}
#reactivar{
    padding-left: 224px;
    font-size: 12px;
}
#reactivarCuerpo{
    padding-left: 224px;
}
#recordarCuerpo{
    padding-left: 224px;
}
#mensaje{
    padding-left: 224px;
    padding-top: 45px;
    padding-right: 4px;
}
/***********Banderas**********************/

.idioma{
    float: left;
    padding-left: 90px;
    text-decoration: none;
    border: none;
}
/****************************************/

#busqueda{
    position: relative;
    margin: auto;
}
/************Perfil********/

#solicitarAmistad{
    position: absolute;
    visibility: hidden;
    margin: auto;
    width: auto;
    top: 40px;
    left: inherit;
    z-index: 2;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -border-radius:5px;
    -webkit-box-shadow:1px 1px 5px purple;
    -moz-box-shadow:1px 1px 5px purple;
    background-color: white;
}

#borrarAmigo{
    position: absolute;
    visibility: hidden;
    margin: auto;
    width: auto;
    top: 40px;
    left: inherit;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -border-radius:5px;
    -webkit-box-shadow:1px 1px 5px purple;
    -moz-box-shadow:1px 1px 5px purple;
    background-color: white;
    z-index: 2;
}
#publicar{
    position: relative;
    margin-left: 5px;
    padding-left: 100px;
    padding-top:70px;
    padding-bottom: 23px;
    width: 98%;
    background: url('../images/fondoPublicar.png') no-repeat;
}
#formPublicar{
    padding-left: 25px;
    padding-top: 5px;
}
#muro{
    margin-top: 10px;
    padding-top: 6px;
    position: relative;
    height: 100%;
    width: 98%;
}
.publicacion{
    position: relative;
    margin: 1px auto;
    width: 100%;
    border-style: groove;
    border-color: #cccccc;
    border-spacing: 1px;
    z-index: 2;
    font-size: 10px;
    letter-spacing: 0px;
}
.publicacion p{
    font-size: 15px;
    font-weight: normal;
    color: #212121;
}
.borrarComentario{
    position: absolute;
    top: 3px;
    right: 3px;
}

#noticias{
    position: relative;
    azimuth: center-left;
    margin: auto;
    height: auto;
    width: 92%;
    z-index: 1;
}
.publicacionFlecha{
}
/*Mostrar y ocultar la parte de añadir lista -Amal*/
#lista li span {display:none;}
.flecha  li{

    list-style-type:none;

}

/*******************************************/
/*Mostrar y ocultar la parte de añadir lista -Amal*/
#lista li span {display:none;}
.flecha  li{
    list-style-type:none;
}

.oculto{
    display:none;
}
/************Muro de datos***********/
.modificarCabecera{
    padding-top: 10px;
    padding-left: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
.modificarCuerpo{
    padding-top: 10px;
    padding-left: 20px;
     -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -border-radius:5px;
    -webkit-box-shadow:1px 1px 5px purple;
    -moz-box-shadow:1px 1px 5px purple;
    display: none;
}
.botonActualizar{
    background: url(../images/botones/actualizar.png) no-repeat;
    width: 30px;
    height: 30px;
}
.botonActualizar:hover{
    background: url(../images/botones/actualizarHover.png) no-repeat;
    width: 36px;
    height: 36px;
}
.informacionAniadir{
    cursor: pointer;
    text-decoration:underline;
}
.informacionOculta{
    display: none;
}

/***********************************/
